1
00:00:00,910 --> 00:00:05,030
[音乐]

2
00:00:05,040 --> 00:00:07,190
你好，欢迎光临，我是戴夫

3
00:00:07,200 --> 00:00:09,350
教程是初学者 css 的一部分

4
00:00:09,360 --> 00:00:11,589
系列我将使用 Chrome 网络

5
00:00:11,599 --> 00:00:14,310
浏览器 Visual Studio 代码编辑器

6
00:00:14,320 --> 00:00:16,230
以及用于视觉的实时服务器扩展

7
00:00:16,240 --> 00:00:18,630
studio代码查看网页

8
00:00:18,640 --> 00:00:20,630
有这些工具启动器的链接

9
00:00:20,640 --> 00:00:23,029
代码文件和所有资源

10
00:00:23,039 --> 00:00:25,269
描述如下

11
00:00:25,279 --> 00:00:27,990
今天我们继续讨论CSS盒子模型

12
00:00:28,000 --> 00:00:30,310
你会发现 css 中的一切都是

13
00:00:30,320 --> 00:00:32,549
盒子，但在我们完成之前我会告诉你

14
00:00:32,559 --> 00:00:34,470
如何将一个盒子变成一个圆形，如果你

15
00:00:34,480 --> 00:00:37,110
想要所以让我们从左边开始

16
00:00:37,120 --> 00:00:39,590
我有 Visual Studio 代码并且我有

17
00:00:39,600 --> 00:00:41,830
我们将修改上一个教程中的代码

18
00:00:41,840 --> 00:00:44,470
就在右边一秒钟我

19
00:00:44,480 --> 00:00:47,190
再次拥有一个基本的网页

20
00:00:47,200 --> 00:00:50,549
h1 标题和一个段落，我正在使用

21
00:00:50,559 --> 00:00:53,270
实时服务器扩展，因此任何更改

22
00:00:53,280 --> 00:00:56,229
我在CSS中制作，当我保存时

23
00:00:56,239 --> 00:00:58,709
文件将立即显示在

24
00:00:58,719 --> 00:01:01,510
网页还好，一切都结束了

25
00:01:01,520 --> 00:01:04,070
在这里，除了 h1 必须离开，所以我

26
00:01:04,080 --> 00:01:06,230
将删除上面的所有内容

27
00:01:06,240 --> 00:01:07,590
及以下

28
00:01:07,600 --> 00:01:09,830
并保留 h1 的样式，我们

29
00:01:09,840 --> 00:01:12,469
现在可以保存，我们可以看到这些更改

30
00:01:12,479 --> 00:01:13,910
我们的段落

31
00:01:13,920 --> 00:01:15,990
文字变小了

32
00:01:16,000 --> 00:01:18,310
其他一切都差不多

33
00:01:18,320 --> 00:01:20,390
相同，只是我们现在有默认值

34
00:01:20,400 --> 00:01:22,870
再次从浏览器获取样式，我们将

35
00:01:22,880 --> 00:01:25,990
稍微恢复一下 css 重置

36
00:01:26,000 --> 00:01:27,590
但现在我们想看看这个

37
00:01:27,600 --> 00:01:30,230
盒子模型，我们已经画了一个盒子

38
00:01:30,240 --> 00:01:32,950
在我们的 h1 周围放置一个边框

39
00:01:32,960 --> 00:01:34,710
元素我们可以在这里看到这个边框

40
00:01:34,720 --> 00:01:36,630
用简写定义，我们会得到

41
00:01:36,640 --> 00:01:39,190
这一切意味着什么

42
00:01:39,200 --> 00:01:41,830
也是第二个，但我首先想做什么

43
00:01:41,840 --> 00:01:43,270
是阻力

44
00:01:43,280 --> 00:01:45,590
我们的 Visual Studio 代码就这样结束了

45
00:01:45,600 --> 00:01:47,590
可能可以并给我们更多的空间

46
00:01:47,600 --> 00:01:48,950
在浏览器中因为我们要

47
00:01:48,960 --> 00:01:51,510
打开开发工具，一旦你这样做了

48
00:01:51,520 --> 00:01:54,950
你可以按 Shift Alt 键，否则很抱歉不能

49
00:01:54,960 --> 00:01:57,670
转变 alt 我相信这是控制转变

50
00:01:57,680 --> 00:01:59,030
和字母我

51
00:01:59,040 --> 00:02:00,950
打开开发工具

52
00:02:00,960 --> 00:02:02,950
如果这不起作用那么你

53
00:02:02,960 --> 00:02:04,550
应该能够不

54
00:02:04,560 --> 00:02:06,230
工作在我这里只花了一秒钟

55
00:02:06,240 --> 00:02:07,350
电脑

56
00:02:07,360 --> 00:02:09,109
如果这不起作用你可以对

57
00:02:09,119 --> 00:02:11,589
单击并选择检查一次

58
00:02:11,599 --> 00:02:13,589
你把它打开了 你可能没有

59
00:02:13,599 --> 00:02:15,350
右侧的开发工具，如果没有的话

60
00:02:15,360 --> 00:02:17,430
您可以单击三个点并选择

61
00:02:17,440 --> 00:02:19,510
我喜欢把它停在哪里

62
00:02:19,520 --> 00:02:22,470
右侧，然后您可以选择任何

63
00:02:22,480 --> 00:02:25,030
这里和你的 html 中的元素

64
00:02:25,040 --> 00:02:26,869
看到网页上闪现

65
00:02:26,879 --> 00:02:28,470
因为它突出显示了什么元素

66
00:02:28,480 --> 00:02:31,350
你已经选择了，我就在元素之中

67
00:02:31,360 --> 00:02:33,509
您也可以选择的选项卡

68
00:02:33,519 --> 00:02:36,150
之后我将选择 h1

69
00:02:36,160 --> 00:02:37,990
所以它在我们的标题元素内部

70
00:02:38,000 --> 00:02:38,790
这里

71
00:02:38,800 --> 00:02:40,630
在我选择它之后，我得到了 h1 和

72
00:02:40,640 --> 00:02:42,470
注意网络上颜色的变化

73
00:02:42,480 --> 00:02:45,350
页面这已经向我们展示了盒子

74
00:02:45,360 --> 00:02:48,390
模型就在这里，所以我们有什么

75
00:02:48,400 --> 00:02:50,949
橙色是边距，然后我们可以

76
00:02:50,959 --> 00:02:53,270
清楚地看到我们设置的边界

77
00:02:53,280 --> 00:02:56,229
有两个像素，它是虚线的

78
00:02:56,239 --> 00:02:58,869
然后在里面我们看到绿色和

79
00:02:58,879 --> 00:03:01,190
那是填充，然后是里面

80
00:03:01,200 --> 00:03:03,110
我们看到蓝色，这实际上是

81
00:03:03,120 --> 00:03:06,149
内容，现在如果我们到这里去

82
00:03:06,159 --> 00:03:07,990
我们有一个样式选项卡让我们选择

83
00:03:08,000 --> 00:03:11,190
计算选项卡，我们实际上看到了这个框

84
00:03:11,200 --> 00:03:13,670
在我们的开发工具中建模，这样我们就可以

85
00:03:13,680 --> 00:03:15,509
突出显示这方面的任何方面，所以我会去

86
00:03:15,519 --> 00:03:18,149
首先到内容，现在我们只看到

87
00:03:18,159 --> 00:03:20,309
网页上突出显示的蓝色以及

88
00:03:20,319 --> 00:03:22,149
这就是我们的内容，它向我们展示

89
00:03:22,159 --> 00:03:25,110
内容的实际大小（以像素为单位）

90
00:03:25,120 --> 00:03:27,589
这里也是如此，然后我们去填充

91
00:03:27,599 --> 00:03:29,589
这是填充的下一层

92
00:03:29,599 --> 00:03:32,470
再次进入边界之内

93
00:03:32,480 --> 00:03:34,470
只是围绕它提供的内容

94
00:03:34,480 --> 00:03:37,670
边框内有一些额外的空间

95
00:03:37,680 --> 00:03:39,270
给我们的内容留出一点空间

96
00:03:39,280 --> 00:03:41,110
如果你愿意的话呼吸一下这样你就可以看到

97
00:03:41,120 --> 00:03:44,470
它是 24 像素然后我们就有了边框

98
00:03:44,480 --> 00:03:46,190
它显示为

99
00:03:46,200 --> 00:03:49,509
1.993 像素我们将其设置为 2 像素嘿

100
00:03:49,519 --> 00:03:52,390
边界右侧和之后足够近

101
00:03:52,400 --> 00:03:55,110
我们有保证金，你可以看到我们没有

102
00:03:55,120 --> 00:03:57,589
设置一个边距，这样这个边距就是

103
00:03:57,599 --> 00:04:01,030
显示我们之后剩下的空间

104
00:04:01,040 --> 00:04:04,470
元素在那里，所以在顶部我们有 32 个

105
00:04:04,480 --> 00:04:07,589
像素，然后我们就有 32 个像素

106
00:04:07,599 --> 00:04:10,309
底部也是如此，这可能只是

107
00:04:10,319 --> 00:04:12,630
由于 h1 的默认值，我们

108
00:04:12,640 --> 00:04:14,949
没有在右侧设置边距，但我们

109
00:04:14,959 --> 00:04:17,110
确实看到那里有很大的利润空间

110
00:04:17,120 --> 00:04:19,990
那只是因为我们设置了 50

111
00:04:20,000 --> 00:04:22,790
我们的 h1 的百分比宽度所以它不是

112
00:04:22,800 --> 00:04:26,230
占用整个页面空间以及什么

113
00:04:26,240 --> 00:04:28,390
左边被边距占据

114
00:04:28,400 --> 00:04:29,990
所以记住如何做很重要

115
00:04:30,000 --> 00:04:31,990
为了进入开发工具，我们正在这样做

116
00:04:32,000 --> 00:04:34,469
下面的计算选项卡，你总是想要

117
00:04:34,479 --> 00:04:36,310
能够调出盒子模型

118
00:04:36,320 --> 00:04:38,070
看看你到底发生了什么

119
00:04:38,080 --> 00:04:40,469
之后的元素也很重要

120
00:04:40,479 --> 00:04:43,110
只是记住不同的层次

121
00:04:43,120 --> 00:04:45,670
css盒子模型所以从

122
00:04:45,680 --> 00:04:48,230
里面我们有内容然后我们有

123
00:04:48,240 --> 00:04:51,189
填充然后我们有边框，最后

124
00:04:51,199 --> 00:04:53,670
我们在外部有余量，现在

125
00:04:53,680 --> 00:04:55,830
关于我们的 h1 和我的利润

126
00:04:55,840 --> 00:04:58,550
已突出显示它是 32 像素

127
00:04:58,560 --> 00:04:59,310
实际上

128
00:04:59,320 --> 00:05:02,790
32.16 像素，我们没有这样设置

129
00:05:02,800 --> 00:05:05,590
这是我们 h1 上的默认样式

130
00:05:05,600 --> 00:05:08,469
选择了 h1 让我们回到

131
00:05:08,479 --> 00:05:11,189
样式选项卡而不是计算选项卡

132
00:05:11,199 --> 00:05:13,189
如果我们只滚动一个，我们就可以看到这一点

133
00:05:13,199 --> 00:05:15,270
一点点就是我们设置的样式

134
00:05:15,280 --> 00:05:17,670
那么这里是默认样式

135
00:05:17,680 --> 00:05:20,150
浏览器这是用户代理风格

136
00:05:20,160 --> 00:05:22,550
由浏览器分配的工作表和

137
00:05:22,560 --> 00:05:25,110
在这里你可以看到他们分配了一些

138
00:05:25,120 --> 00:05:28,870
这里的边距设置是0.67

139
00:05:28,880 --> 00:05:32,390
所以现在基本上是三分之二

140
00:05:32,400 --> 00:05:35,510
如果我们记得我们的单位 e-m

141
00:05:35,520 --> 00:05:38,790
响应元素的字体大小

142
00:05:38,800 --> 00:05:41,670
我们将字体大小设置为三边

143
00:05:41,680 --> 00:05:45,110
这基本上是 48 像素，所以

144
00:05:45,120 --> 00:05:47,110
其中三分之二是正确的

145
00:05:47,120 --> 00:05:49,110
在我们在盒子模型上看到它的地方

146
00:05:49,120 --> 00:05:51,749
这里在

147
00:05:51,759 --> 00:05:54,390
像素所以现在我们知道我们的字体大小

148
00:05:54,400 --> 00:05:56,710
正在影响默认保证金，我们走吧

149
00:05:56,720 --> 00:05:59,110
继续并更改我们的字体大小和

150
00:05:59,120 --> 00:06:00,870
当然它也会改变我们的填充

151
00:06:00,880 --> 00:06:03,510
我们将基于 em 单位

152
00:06:03,520 --> 00:06:05,029
将此更改为

153
00:06:05,039 --> 00:06:08,550
如果我可以在这里输入 rim 和

154
00:06:08,560 --> 00:06:09,510
保存

155
00:06:09,520 --> 00:06:12,230
现在情况发生了变化，请注意我们的

156
00:06:12,240 --> 00:06:14,350
边距变小了

157
00:06:14,360 --> 00:06:17,830
21.44 因为我们的字体变小了

158
00:06:17,840 --> 00:06:21,670
这是基于 em 单位和 m

159
00:06:21,680 --> 00:06:23,990
就浏览器而言

160
00:06:24,000 --> 00:06:27,430
再次它仍然是 0.67 em

161
00:06:27,440 --> 00:06:30,510
但实际尺寸要小一些

162
00:06:30,520 --> 00:06:33,430
21.44像素现在可以这样改变

163
00:06:33,440 --> 00:06:35,510
真的很难追踪，所以

164
00:06:35,520 --> 00:06:37,350
这就是为什么有时我们只是想

165
00:06:37,360 --> 00:06:40,790
重置所有浏览器设置

166
00:06:40,800 --> 00:06:42,629
边距和所有填充以及只是

167
00:06:42,639 --> 00:06:45,110
我们自己控制它们并

168
00:06:45,120 --> 00:06:48,309
这就是为什么我们使用 css 重置和非常

169
00:06:48,319 --> 00:06:51,350
基本的CSS重启从狂野开始

170
00:06:51,360 --> 00:06:54,150
卡在顶部，然后我们设置边距

171
00:06:54,160 --> 00:06:55,990
对于所有元素，因为记住这一点

172
00:06:56,000 --> 00:06:58,710
通配符选择所有元素，所以我们设置

173
00:06:58,720 --> 00:07:00,629
保证金为零

174
00:07:00,639 --> 00:07:03,189
我们将填充设置为零

175
00:07:03,199 --> 00:07:05,990
现在我们可以保存这一切

176
00:07:06,000 --> 00:07:07,749
margin 和 padding 设置为

177
00:07:07,759 --> 00:07:09,830
默认值被去掉，你可以看到

178
00:07:09,840 --> 00:07:12,469
身体其实有一点点

179
00:07:12,479 --> 00:07:14,550
边距也设置为它，因为现在

180
00:07:14,560 --> 00:07:16,390
我们已经到了身体的边缘

181
00:07:16,400 --> 00:07:19,029
在我们的页面上和我们设置的边框上

182
00:07:19,039 --> 00:07:20,629
围绕我们的 h1

183
00:07:20,639 --> 00:07:22,469
一直到页面边缘，如下所示

184
00:07:22,479 --> 00:07:24,790
好吧，还有一个设置我

185
00:07:24,800 --> 00:07:27,589
总是放在CSS重置里面并且

186
00:07:27,599 --> 00:07:29,350
那是盒子

187
00:07:29,360 --> 00:07:31,749
破折号尺寸我们开始

188
00:07:31,759 --> 00:07:33,589
现在是默认的

189
00:07:33,599 --> 00:07:37,110
是内容框，如果我们保存，我们就不会

190
00:07:37,120 --> 00:07:38,950
确实注意到了这里的变化，但它没有

191
00:07:38,960 --> 00:07:41,350
真正改变任何事情，因为那是

192
00:07:41,360 --> 00:07:44,629
默认内容框的作用

193
00:07:44,639 --> 00:07:46,869
它说我们的尺寸可以吗

194
00:07:46,879 --> 00:07:49,510
内容的设置是这样的

195
00:07:49,520 --> 00:07:52,070
仅包含不包含的内容

196
00:07:52,080 --> 00:07:54,790
计算填充的大小或

197
00:07:54,800 --> 00:07:57,670
边界或边缘的根本如此

198
00:07:57,680 --> 00:07:59,270
而不是 50

199
00:07:59,280 --> 00:08:01,350
我要设置一个绝对宽度

200
00:08:01,360 --> 00:08:03,909
在这里我们可以比较，我会设置这个

201
00:08:03,919 --> 00:08:05,350
说

202
00:08:05,360 --> 00:08:09,430
400像素，现在保存让我们看一下

203
00:08:09,440 --> 00:08:11,909
在我们的盒子里，我们可以看到

204
00:08:11,919 --> 00:08:15,029
内容是 400 像素，但事实并非如此

205
00:08:15,039 --> 00:08:17,270
考虑我们所拥有的填充

206
00:08:17,280 --> 00:08:19,589
这不是我们原来的 400 像素

207
00:08:19,599 --> 00:08:21,830
期望我们占用的空间比

208
00:08:21,840 --> 00:08:25,110
但如果我们将其设置为边框

209
00:08:25,120 --> 00:08:27,189
而不是内容框

210
00:08:27,199 --> 00:08:29,589
然后我们就会得到我们期望的结果

211
00:08:29,599 --> 00:08:31,830
计算起来容易得多，所以现在注意

212
00:08:31,840 --> 00:08:34,790
我们这里的内容不是 400 像素

213
00:08:34,800 --> 00:08:36,949
是 348

214
00:08:36,959 --> 00:08:38,709
然后我们可以添加

215
00:08:38,719 --> 00:08:42,550
每边 24 像素的填充，

216
00:08:42,560 --> 00:08:45,829
每边两个像素的边框和

217
00:08:45,839 --> 00:08:48,550
那么我们就可以得到 400 的总数。所以

218
00:08:48,560 --> 00:08:51,030
borderbox 的作用是真的有帮助

219
00:08:51,040 --> 00:08:53,670
我们计算出我们的尺寸

220
00:08:53,680 --> 00:08:55,430
分配，因为它继续进行并且

221
00:08:55,440 --> 00:08:57,670
包括边框和填充

222
00:08:57,680 --> 00:08:59,910
不包括保证金 保证金

223
00:08:59,920 --> 00:09:02,070
在外面

224
00:09:02,080 --> 00:09:04,949
我们创建的 css 框

225
00:09:04,959 --> 00:09:06,870
无论我们设计哪些元素

226
00:09:06,880 --> 00:09:08,870
所以保证金不包括在其中

227
00:09:08,880 --> 00:09:11,829
计算但是剩下的就是这样

228
00:09:11,839 --> 00:09:14,150
边框、填充和内容

229
00:09:14,160 --> 00:09:16,550
所有加起来就是我设置的 400 像素

230
00:09:16,560 --> 00:09:18,550
就在这里，好吧，既然我们已经分手了

231
00:09:18,560 --> 00:09:21,190
了解边框设置的工作原理

232
00:09:21,200 --> 00:09:24,310
并查看了 CSS 盒模型，让我们开始吧

233
00:09:24,320 --> 00:09:26,790
继续并关闭开发工具，让我们

234
00:09:26,800 --> 00:09:28,710
用一些样式来设计我们的页面

235
00:09:28,720 --> 00:09:30,550
我将调整这些属性的大小

236
00:09:30,560 --> 00:09:32,070
稍微翻页一下，所以我们还有更多

237
00:09:32,080 --> 00:09:33,910
此处有 Visual Studio 代码的空间

238
00:09:33,920 --> 00:09:37,190
左边我把它拉到那里我们走

239
00:09:37,200 --> 00:09:39,750
现在让我们做一些改变

240
00:09:39,760 --> 00:09:42,150
我想到的是我们的h1

241
00:09:42,160 --> 00:09:44,310
这里有一些我通常设置的设置

242
00:09:44,320 --> 00:09:46,310
可能不会戴 h1 我只是

243
00:09:46,320 --> 00:09:48,870
更关心那里的字体但是

244
00:09:48,880 --> 00:09:51,350
将分配的字体大小

245
00:09:51,360 --> 00:09:53,590
默认值也可以，所以我会得到

246
00:09:53,600 --> 00:09:56,550
摆脱这个，现在这些其他设置

247
00:09:56,560 --> 00:09:58,949
我实际上更有可能把

248
00:09:58,959 --> 00:10:01,910
在集装箱上比在 h1 上

249
00:10:01,920 --> 00:10:04,550
其本身和 h1 位于标头内

250
00:10:04,560 --> 00:10:07,509
元素所以让我们继续保存它

251
00:10:07,519 --> 00:10:09,670
它只改变了一点点但是

252
00:10:09,680 --> 00:10:11,670
没关系，我会改变这些

253
00:10:11,680 --> 00:10:14,550
ems 回到轮圈，因为现在我不是

254
00:10:14,560 --> 00:10:16,470
在标题上设置字体大小，所以我

255
00:10:16,480 --> 00:10:19,110
这里将使用 1.5 轮辋

256
00:10:19,120 --> 00:10:21,509
并保存，现在我们有了填充

257
00:10:21,519 --> 00:10:23,430
回到原来的位置，但现在怎么办

258
00:10:23,440 --> 00:10:25,430
如果我想分配这些相同的

259
00:10:25,440 --> 00:10:27,269
我们的容器的设置

260
00:10:27,279 --> 00:10:29,269
段落在并且在主要内容中

261
00:10:29,279 --> 00:10:31,590
元素所以也许我不想要这个

262
00:10:31,600 --> 00:10:33,829
标题也许我想分配一个

263
00:10:33,839 --> 00:10:36,470
容器类，这样我就可以提供这些

264
00:10:36,480 --> 00:10:37,990
多个相同的设置

265
00:10:38,000 --> 00:10:39,670
容器所以我要快点走

266
00:10:39,680 --> 00:10:41,590
到html

267
00:10:41,600 --> 00:10:44,310
在 html 中我们将设置一个名为

268
00:10:44,320 --> 00:10:46,949
每个元素上都有容器，所以

269
00:10:46,959 --> 00:10:49,110
我们有标题元素

270
00:10:49,120 --> 00:10:51,269
我们将把类设置为

271
00:10:51,279 --> 00:10:52,630
容器

272
00:10:52,640 --> 00:10:56,230
我还有一个额外的

273
00:10:56,240 --> 00:10:58,389
引用那里，我们开始，现在我只是

274
00:10:58,399 --> 00:11:00,630
将复制此内容并粘贴它

275
00:11:00,640 --> 00:11:01,990
进入我们的

276
00:11:02,000 --> 00:11:05,430
也是主要元素

277
00:11:05,440 --> 00:11:08,069
并保存它，我们现在就开始

278
00:11:08,079 --> 00:11:10,069
我们在这两个周围都有破折号

279
00:11:10,079 --> 00:11:13,190
这里的框让我们回到 css 并

280
00:11:13,200 --> 00:11:15,030
把它们放大以便我们可以看到它们

281
00:11:15,040 --> 00:11:17,030
现在页面上更好，我要去

282
00:11:17,040 --> 00:11:19,590
去掉这个 100 像素或 400

283
00:11:19,600 --> 00:11:21,990
像素宽度让我们继续让他们

284
00:11:22,000 --> 00:11:25,030
目前占据全部100%

285
00:11:25,040 --> 00:11:27,350
好的，让我们继续添加字体大小

286
00:11:27,360 --> 00:11:29,269
到容器，它将适用于

287
00:11:29,279 --> 00:11:30,949
这两者都不同，但我们会设置

288
00:11:30,959 --> 00:11:32,790
到 1.5

289
00:11:32,800 --> 00:11:34,630
边缘并保存

290
00:11:34,640 --> 00:11:36,870
现在我们的字体大一点但是

291
00:11:36,880 --> 00:11:38,870
注意边框的边缘如何

292
00:11:38,880 --> 00:11:41,269
就在页面上

293
00:11:41,279 --> 00:11:44,310
在我们的盒子之外，我们可以设置边距

294
00:11:44,320 --> 00:11:47,750
并且将其设置为 1.5 ram 并保存

295
00:11:47,760 --> 00:11:50,310
现在我们有了两个盒子

296
00:11:50,320 --> 00:11:52,069
利润已将他们推离了

297
00:11:52,079 --> 00:11:54,870
边距也提供了空间

298
00:11:54,880 --> 00:11:56,949
在这里和现在的两个盒子之间

299
00:11:56,959 --> 00:11:59,190
我们的容器上有一个字体大小

300
00:11:59,200 --> 00:12:01,430
可以继续并将其切换回

301
00:12:01,440 --> 00:12:03,190
ems并记住

302
00:12:03,200 --> 00:12:06,710
one m one e m 与

303
00:12:06,720 --> 00:12:08,629
字体大小，因此它等于

304
00:12:08,639 --> 00:12:12,069
1.5 轮辋所以如果我们做出这个改变我们

305
00:12:12,079 --> 00:12:14,069
只需将其更改为 1 m

306
00:12:14,079 --> 00:12:16,470
我们的尺寸应该保持不变

307
00:12:16,480 --> 00:12:20,230
如果我们将其更改为 1.5 就会这样

308
00:12:20,240 --> 00:12:21,750
变得更大

309
00:12:21,760 --> 00:12:23,910
是的，现在我们有更多的填充

310
00:12:23,920 --> 00:12:25,829
可以通过做同样的事情来增加更多的利润

311
00:12:25,839 --> 00:12:27,670
如果我们愿意的话，让我们继续吧

312
00:12:27,680 --> 00:12:28,550
那个

313
00:12:28,560 --> 00:12:30,310
现在让我们继续

314
00:12:30,320 --> 00:12:32,710
并尝试边距和

315
00:12:32,720 --> 00:12:34,629
填充，因为我们不需要

316
00:12:34,639 --> 00:12:37,670
右上下方同样的设置

317
00:12:37,680 --> 00:12:40,389
然后离开了，我确实说了那个命令

318
00:12:40,399 --> 00:12:42,389
专门出于某个原因 因为

319
00:12:42,399 --> 00:12:45,670
我们可以直接说margin

320
00:12:45,680 --> 00:12:49,110
顶部，这里我们继续说 1.5

321
00:12:49,120 --> 00:12:50,790
并保存

322
00:12:50,800 --> 00:12:52,389
看看我们的其他人会发生什么

323
00:12:52,399 --> 00:12:54,310
margins 左边距和右边距是

324
00:12:54,320 --> 00:12:56,629
走了你就看不到我们了

325
00:12:56,639 --> 00:12:58,949
失去了底部的边距，但我们做到了

326
00:12:58,959 --> 00:13:00,470
唯一将这些分开的东西

327
00:13:00,480 --> 00:13:03,590
容器现在是顶部的边距

328
00:13:03,600 --> 00:13:05,509
现在让我们继续添加一些

329
00:13:05,519 --> 00:13:07,910
右边距

330
00:13:07,920 --> 00:13:10,629
在这里我们将其设置为 2em 并保存

331
00:13:10,639 --> 00:13:12,629
所以它稍微大一点，现在我们

332
00:13:12,639 --> 00:13:15,030
右侧确实有边距，但仍然没有

333
00:13:15,040 --> 00:13:16,949
底部有边距，上面没有边距

334
00:13:16,959 --> 00:13:18,790
左边我要按 Shift Alt

335
00:13:18,800 --> 00:13:20,389
和向下箭头

336
00:13:20,399 --> 00:13:22,870
现在我要走的不是右边

337
00:13:22,880 --> 00:13:24,550
将此切换到

338
00:13:24,560 --> 00:13:25,750
底部

339
00:13:25,760 --> 00:13:28,150
并保存，现在我们还有更多

340
00:13:28,160 --> 00:13:29,990
底部的边距所以

341
00:13:30,000 --> 00:13:32,230
这两个盒子之间的距离是

342
00:13:32,240 --> 00:13:33,670
更大，这是你唯一能做的

343
00:13:33,680 --> 00:13:35,430
真的看到那里

344
00:13:35,440 --> 00:13:38,150
现在在右边让我们继续

345
00:13:38,160 --> 00:13:40,069
我的意思是在左边的开关让我们继续

346
00:13:40,079 --> 00:13:42,790
并将其也切换为两个em

347
00:13:42,800 --> 00:13:45,350
你可以看到我们得到了同样的东西

348
00:13:45,360 --> 00:13:46,710
我们刚刚说过

349
00:13:46,720 --> 00:13:50,069
保证金 2em，除非我们想要保证金

350
00:13:50,079 --> 00:13:53,269
1.5安培的顶部，所以有简写

351
00:13:53,279 --> 00:13:55,590
所以我要评论所有四个

352
00:13:55,600 --> 00:13:58,629
这些出来，我会按 Shift Alt 并

353
00:13:58,639 --> 00:14:00,629
字母 a 可以做到这一点

354
00:14:00,639 --> 00:14:02,870
在那里你可以看到一个CSS注释所以它

355
00:14:02,880 --> 00:14:04,389
评论了这些，所以现在就在那里

356
00:14:04,399 --> 00:14:06,389
现在将再次没有余量

357
00:14:06,399 --> 00:14:09,269
盒子彼此相邻，没有边距

358
00:14:09,279 --> 00:14:11,670
左边和右边但是我们的简写

359
00:14:11,680 --> 00:14:13,750
只是说保证金，当我说

360
00:14:13,760 --> 00:14:15,829
这个1.5

361
00:14:15,839 --> 00:14:16,790
嗯

362
00:14:16,800 --> 00:14:19,910
将其应用于顶部底部

363
00:14:19,920 --> 00:14:21,670
左、右，它实际上进去了

364
00:14:21,680 --> 00:14:24,790
顺序是右上角左下所以现在

365
00:14:24,800 --> 00:14:26,550
我们可以进行不同的设置

366
00:14:26,560 --> 00:14:29,509
如果我们想要的话，简写为 1.5

367
00:14:29,519 --> 00:14:30,550
顶部

368
00:14:30,560 --> 00:14:31,829
然后

369
00:14:31,839 --> 00:14:36,230
左右各2m，然后

370
00:14:36,240 --> 00:14:39,350
底部有 2 m，我可以保存

371
00:14:39,360 --> 00:14:41,750
这和我们的时候是一样的

372
00:14:41,760 --> 00:14:44,790
现在这四个都在这里如果

373
00:14:44,800 --> 00:14:46,790
我只是想拥有

374
00:14:46,800 --> 00:14:50,550
顶部和底部分别为 1.5 个和两个

375
00:14:50,560 --> 00:14:52,470
左边和右边我可以删除

376
00:14:52,480 --> 00:14:54,470
第三个设置就在这里

377
00:14:54,480 --> 00:14:56,710
这就是我们得到的所以现在它会

378
00:14:56,720 --> 00:14:59,430
取1.5并将其应用到顶部和底部

379
00:14:59,440 --> 00:15:00,629
底部

380
00:15:00,639 --> 00:15:03,509
和 2 并将其应用到右边和

381
00:15:03,519 --> 00:15:06,629
左边但是你可以提供全部四个

382
00:15:06,639 --> 00:15:09,430
设置以便我们可以进行 3

383
00:15:09,440 --> 00:15:10,949
和 4

384
00:15:10,959 --> 00:15:13,030
然后我们就会得到简写

385
00:15:13,040 --> 00:15:15,990
注意左边距的最终值

386
00:15:16,000 --> 00:15:18,470
这里要大两倍

387
00:15:18,480 --> 00:15:20,629
实际上是右边距，然后

388
00:15:20,639 --> 00:15:21,670
底部

389
00:15:21,680 --> 00:15:23,509
肯定大于上边距

390
00:15:23,519 --> 00:15:25,269
因为在这里你只能看到顶部

391
00:15:25,279 --> 00:15:27,269
边距适用于第一个

392
00:15:27,279 --> 00:15:29,990
容器，现在你可以看到

393
00:15:30,000 --> 00:15:31,990
上边距和下边距

394
00:15:32,000 --> 00:15:34,389
这里结合起来创造了空间

395
00:15:34,399 --> 00:15:37,509
现在两个盒子之间有同样的想法

396
00:15:37,519 --> 00:15:40,389
因为速记也适用于填充所以

397
00:15:40,399 --> 00:15:43,509
我会复制这些，实际上把它们剪下来

398
00:15:43,519 --> 00:15:45,670
只需返回到一个设置即可

399
00:15:45,680 --> 00:15:47,509
边距，这样看起来多一点

400
00:15:47,519 --> 00:15:50,470
再次正常，但现在让我们应用

401
00:15:50,480 --> 00:15:52,310
填充也一样，我们会看到

402
00:15:52,320 --> 00:15:55,269
这是如何变化的，所以现在我们有很多

403
00:15:55,279 --> 00:15:57,910
左内边距较大，为四倍

404
00:15:57,920 --> 00:15:59,829
就像我们右边的一样

405
00:15:59,839 --> 00:16:02,310
然后我们有一个比我们更大的底部

406
00:16:02,320 --> 00:16:04,389
在上面做这更容易看到，因为

407
00:16:04,399 --> 00:16:06,310
它在我们的容器里面

408
00:16:06,320 --> 00:16:08,069
记住如果你曾经遇到困难

409
00:16:08,079 --> 00:16:10,069
是时候看到所有这些不同的白色了

410
00:16:10,079 --> 00:16:11,910
空间我想我拖了视觉工作室

411
00:16:11,920 --> 00:16:13,670
我的意思是抓住铬的边缘的代码

412
00:16:13,680 --> 00:16:15,910
我将把它拉过来

413
00:16:15,920 --> 00:16:18,310
右键单击选择检查

414
00:16:18,320 --> 00:16:20,710
再次打开开发工具，我们就可以

415
00:16:20,720 --> 00:16:23,350
看到所有这些隐藏的空白

416
00:16:23,360 --> 00:16:26,230
当我们查看盒子模型时会更清楚

417
00:16:26,240 --> 00:16:28,069
再次在开发工具中选择

418
00:16:28,079 --> 00:16:30,550
计算选项卡，但我们还需要

419
00:16:30,560 --> 00:16:32,389
突出显示我们要关注的内容

420
00:16:32,399 --> 00:16:35,110
我要选择这个主容器

421
00:16:35,120 --> 00:16:36,949
现在我们可以看到这个空间了

422
00:16:36,959 --> 00:16:39,749
在这里应用所以内容如下

423
00:16:39,759 --> 00:16:42,150
这是填充，我们有 48 个

424
00:16:42,160 --> 00:16:44,790
右边有 96 个像素，左边有 96 个像素

425
00:16:44,800 --> 00:16:49,030
两倍，我们上面有 36 个，但有 72 个

426
00:16:49,040 --> 00:16:50,790
在底部，是两倍

427
00:16:50,800 --> 00:16:53,350
也因此我们绝对可以看到我们的

428
00:16:53,360 --> 00:16:55,509
拖动后将填充设置放在这里

429
00:16:55,519 --> 00:16:58,389
这正在被应用，因为我们

430
00:16:58,399 --> 00:17:00,790
用这个速记指定它们好吗

431
00:17:00,800 --> 00:17:02,790
回到我要去的 Visual Studio 代码

432
00:17:02,800 --> 00:17:04,870
再次调整 chrome 大小，以便我们可以看到

433
00:17:04,880 --> 00:17:06,470
我们的代码更好

434
00:17:06,480 --> 00:17:08,470
把这个拖过去

435
00:17:08,480 --> 00:17:10,230
将 Visual Studio 代码拖回来

436
00:17:10,240 --> 00:17:12,789
我们就这样吧，我们也可以做同样的事情

437
00:17:12,799 --> 00:17:15,270
你可能对边框期待的事情

438
00:17:15,280 --> 00:17:17,270
其实首先值得讨论的是你可以

439
00:17:17,280 --> 00:17:19,270
只需删除两个像素

440
00:17:19,280 --> 00:17:21,350
然后当我们保存它时实际上会得到一个

441
00:17:21,360 --> 00:17:23,189
稍微厚一点，因为默认值是

442
00:17:23,199 --> 00:17:26,309
这里的尺寸更像是三个像素

443
00:17:26,319 --> 00:17:28,470
我要删除这个奇怪的尺寸

444
00:17:28,480 --> 00:17:30,789
我刚才用的填充物

445
00:17:30,799 --> 00:17:32,390
表示不同的

446
00:17:32,400 --> 00:17:34,549
两侧的填充物，我们会回去

447
00:17:34,559 --> 00:17:36,630
为了正常的外观，我们有

448
00:17:36,640 --> 00:17:39,110
两个容器并且它们具有相同的

449
00:17:39,120 --> 00:17:41,190
周围的填充和等边距

450
00:17:41,200 --> 00:17:43,029
这些设置也适用于

451
00:17:43,039 --> 00:17:45,270
各个边界两侧，这意味着我们

452
00:17:45,280 --> 00:17:48,310
可以说边框破折号顶部，在这里我们

453
00:17:48,320 --> 00:17:49,430
可以说

454
00:17:49,440 --> 00:17:50,950
5像素

455
00:17:50,960 --> 00:17:53,110
固体然后我会继续按

456
00:17:53,120 --> 00:17:55,430
移动 alt 和向下箭头，然后

457
00:17:55,440 --> 00:17:57,590
我会继续，而不是边框顶部

458
00:17:57,600 --> 00:17:59,190
说边界

459
00:17:59,200 --> 00:18:02,230
是的，我会说

460
00:18:02,240 --> 00:18:06,870
10 像素，这里我会说点状

461
00:18:06,880 --> 00:18:08,390
并保存

462
00:18:08,400 --> 00:18:10,549
现在我们可以看到我们有一些主要的

463
00:18:10,559 --> 00:18:12,390
此处进行更改，我们没有指定

464
00:18:12,400 --> 00:18:14,470
颜色所以这些设置

465
00:18:14,480 --> 00:18:16,710
覆盖我们设置的内容

466
00:18:16,720 --> 00:18:19,270
上面的简写，所以默认颜色

467
00:18:19,280 --> 00:18:21,669
是黑色的，但我们有一个点右边，

468
00:18:21,679 --> 00:18:23,669
我们有一个坚固的顶部，所以我们可以

469
00:18:23,679 --> 00:18:25,750
在这里也指定了不同的颜色

470
00:18:25,760 --> 00:18:27,270
所以我们可以说

471
00:18:27,280 --> 00:18:29,669
绿色，然后当然在这里我们

472
00:18:29,679 --> 00:18:32,310
可以说一些不同的话，比如

473
00:18:32,320 --> 00:18:33,270
黄色

474
00:18:33,280 --> 00:18:35,430
并保存，现在

475
00:18:35,440 --> 00:18:37,750
这太丑了，绝对改变了我们

476
00:18:37,760 --> 00:18:39,350
不过，我会将其切换为

477
00:18:39,360 --> 00:18:42,070
蓝色，稍微保护一下我们的眼睛

478
00:18:42,080 --> 00:18:44,230
如果我们想指定这些

479
00:18:44,240 --> 00:18:46,470
单独我们甚至可以说边界

480
00:18:46,480 --> 00:18:47,750
顶部

481
00:18:47,760 --> 00:18:50,310
宽度，然后我们不会指定

482
00:18:50,320 --> 00:18:52,310
这里是实心或绿色，这样你就可以爆发

483
00:18:52,320 --> 00:18:53,110
每个

484
00:18:53,120 --> 00:18:55,830
个人设置以及现在你

485
00:18:55,840 --> 00:18:58,070
可以看到我们刚刚改变了宽度

486
00:18:58,080 --> 00:19:00,870
顶部同样代替宽度

487
00:19:00,880 --> 00:19:03,750
还有边框顶部让我切换

488
00:19:03,760 --> 00:19:06,070
我们就这样走风格，这就是地方

489
00:19:06,080 --> 00:19:07,750
我们正在指定

490
00:19:07,760 --> 00:19:10,390
点状或其他任何东西这里的山脊是

491
00:19:10,400 --> 00:19:12,950
我们将保存另一个值，所以现在

492
00:19:12,960 --> 00:19:14,470
顶部有点不同

493
00:19:14,480 --> 00:19:16,710
看起来很像实体设置

494
00:19:16,720 --> 00:19:18,950
确实如此，然后当然会有

495
00:19:18,960 --> 00:19:20,470
边框顶部

496
00:19:20,480 --> 00:19:21,430
颜色

497
00:19:21,440 --> 00:19:23,190
我们可以把它变成任何我们想要的颜色

498
00:19:23,200 --> 00:19:26,310
想要，所以我也会在这里选择蓝色

499
00:19:26,320 --> 00:19:29,029
现在我们有一条蓝色虚线

500
00:19:29,039 --> 00:19:31,669
越过我们边境的顶部这么多

501
00:19:31,679 --> 00:19:33,830
中断时的边框设置

502
00:19:33,840 --> 00:19:36,070
将它们单独拿出来，我们有边框顶部

503
00:19:36,080 --> 00:19:38,789
但随后我们还指定了边框顶部

504
00:19:38,799 --> 00:19:41,909
宽度 边框顶部样式 边框顶部颜色

505
00:19:41,919 --> 00:19:43,350
然后你当然可以这样做

506
00:19:43,360 --> 00:19:45,190
而不是 for top 你可以做正确的事

507
00:19:45,200 --> 00:19:47,430
底部和左侧也是如此

508
00:19:47,440 --> 00:19:49,430
经常因为这个因为有

509
00:19:49,440 --> 00:19:52,150
这么多我会删除这个我只是使用

510
00:19:52,160 --> 00:19:54,789
我通常希望我的边框简写为

511
00:19:54,799 --> 00:19:56,789
四周宽度相同

512
00:19:56,799 --> 00:19:59,430
所以之前我这里有两个像素

513
00:19:59,440 --> 00:20:01,350
然后我选择了破折号让我们选择一个

514
00:20:01,360 --> 00:20:03,590
这里我们使用不同的

515
00:20:03,600 --> 00:20:05,270
一开始

516
00:20:05,280 --> 00:20:08,310
我们将保存，我们可以看到它发生了变化

517
00:20:08,320 --> 00:20:10,470
我们的框架围绕着另一个盒子

518
00:20:10,480 --> 00:20:12,789
我喜欢的叫双重

519
00:20:12,799 --> 00:20:15,110
我将添加一个指向边框页面的链接

520
00:20:15,120 --> 00:20:17,669
从 mdn 的描述中你可以

521
00:20:17,679 --> 00:20:19,510
查看那里所有不同的值

522
00:20:19,520 --> 00:20:21,510
让我们把它做得更大，这样我们就可以真正

523
00:20:21,520 --> 00:20:22,230
看到

524
00:20:22,240 --> 00:20:24,549
我会节省它在这里的双重作用

525
00:20:24,559 --> 00:20:26,149
就这样，我们得到了我们的双倍

526
00:20:26,159 --> 00:20:28,310
现在每个容器周围都有线

527
00:20:28,320 --> 00:20:30,470
我们正在覆盖另一种设置的边界

528
00:20:30,480 --> 00:20:33,190
覆盖是轮廓 轮廓不是部分

529
00:20:33,200 --> 00:20:34,950
由于盒模型的差异

530
00:20:34,960 --> 00:20:36,870
它和边界之间的是它

531
00:20:36,880 --> 00:20:39,590
不占用空间，但你的风格

532
00:20:39,600 --> 00:20:41,990
轮廓很像边框

533
00:20:42,000 --> 00:20:45,190
所以这里我要选择 5 像素

534
00:20:45,200 --> 00:20:46,870
我会选择固体

535
00:20:46,880 --> 00:20:48,630
然后让我们把轮廓做成

536
00:20:48,640 --> 00:20:50,870
完全不同的颜色让我们一起去吧

537
00:20:50,880 --> 00:20:53,270
紫色

538
00:20:53,280 --> 00:20:56,710
如果我现在保存这个我们可以看到紫色

539
00:20:56,720 --> 00:20:59,750
再次绕出我们的边界

540
00:20:59,760 --> 00:21:02,789
轮廓没有被计算，因为它

541
00:21:02,799 --> 00:21:04,390
不占用空间，所以它不是

542
00:21:04,400 --> 00:21:07,029
计算到该盒模型方程中

543
00:21:07,039 --> 00:21:09,510
大纲的另一个属性

544
00:21:09,520 --> 00:21:11,350
这非常方便

545
00:21:11,360 --> 00:21:14,390
是轮廓虚线偏移所以而不是

546
00:21:14,400 --> 00:21:16,549
正对着我们的盒子我们可以

547
00:21:16,559 --> 00:21:19,909
假设我们希望偏移量为 5 像素

548
00:21:19,919 --> 00:21:22,870
保存并查看我们现在如何推动它 5

549
00:21:22,880 --> 00:21:26,149
距离我们边界更远的像素

550
00:21:26,159 --> 00:21:29,029
它与其余部分偏移 5 个像素

551
00:21:29,039 --> 00:21:31,350
我们的盒子和一些值得考虑的东西

552
00:21:31,360 --> 00:21:34,070
有时使用负值，所以

553
00:21:34,080 --> 00:21:36,630
如果我输入负 10 个像素

554
00:21:36,640 --> 00:21:39,669
我们现在将看到外部轮廓

555
00:21:39,679 --> 00:21:43,029
就在我们的盒子里面，所以让我们

556
00:21:43,039 --> 00:21:44,549
继续改变这个，这样我们

557
00:21:44,559 --> 00:21:46,390
也许再往里面走一点

558
00:21:46,400 --> 00:21:49,430
即使是 20 像素并保存，我们就可以

559
00:21:49,440 --> 00:21:52,390
清楚地看到轮廓现在在里面

560
00:21:52,400 --> 00:21:54,710
我们的盒子模型一开始还好我

561
00:21:54,720 --> 00:21:57,430
承诺展示如何将盒子变成

562
00:21:57,440 --> 00:21:59,350
在我们完成之前绕了一圈

563
00:21:59,360 --> 00:22:01,110
让我们这样做吧，我需要回到

564
00:22:01,120 --> 00:22:02,230
文件树

565
00:22:02,240 --> 00:22:05,190
找到我们的索引 html 并隐藏

566
00:22:05,200 --> 00:22:07,110
ctrl b 的文件树

567
00:22:07,120 --> 00:22:09,590
我只想在这里放一个 div

568
00:22:09,600 --> 00:22:11,590
我要把它放在一边

569
00:22:11,600 --> 00:22:14,149
主要元素，所以我只需输入

570
00:22:14,159 --> 00:22:17,110
div 然后我想给这个div

571
00:22:17,120 --> 00:22:20,710
一个类并将其设置为等于

572
00:22:20,720 --> 00:22:21,590
到

573
00:22:21,600 --> 00:22:23,430
我们去那里转圈

574
00:22:23,440 --> 00:22:25,270
我还是没拼出圆圈，对吧

575
00:22:25,280 --> 00:22:27,430
今天过得很艰难，除了那里

576
00:22:27,440 --> 00:22:29,750
我们有一个带有 Circle 类的 div

577
00:22:29,760 --> 00:22:32,950
好的，我们可以关闭 html，现在让我们

578
00:22:32,960 --> 00:22:35,190
设计我们的圆圈类

579
00:22:35,200 --> 00:22:37,669
所以我们将从圆的定义开始

580
00:22:37,679 --> 00:22:39,430
在这里上课

581
00:22:39,440 --> 00:22:41,990
让我们给圆圈一个背景

582
00:22:42,000 --> 00:22:45,270
颜色

583
00:22:45,280 --> 00:22:47,830
黄金，但我们没有给出任何尺寸

584
00:22:47,840 --> 00:22:50,630
那么我们就说一个宽度

585
00:22:50,640 --> 00:22:53,110
100 像素

586
00:22:53,120 --> 00:22:56,470
高度为 100 像素

587
00:22:56,480 --> 00:22:57,909
这看起来不太像

588
00:22:57,919 --> 00:22:59,909
还没有绕圈，但我们会继续前进

589
00:22:59,919 --> 00:23:02,549
现在添加两个像素的边框

590
00:23:02,559 --> 00:23:05,510
我们将把它变成纯黑色

591
00:23:05,520 --> 00:23:07,590
现在我们看到我们的边框应用到了我们的

592
00:23:07,600 --> 00:23:08,710
正方形

593
00:23:08,720 --> 00:23:11,190
让我们也添加一个轮廓

594
00:23:11,200 --> 00:23:14,470
该轮廓需要一个新行

595
00:23:14,480 --> 00:23:16,950
现在轮廓可以是 2 像素让我们

596
00:23:16,960 --> 00:23:19,669
说实话，现在我们选择红色

597
00:23:19,679 --> 00:23:21,350
所以它会与其他一切相匹配

598
00:23:21,360 --> 00:23:23,909
现在让我们脱颖而出

599
00:23:23,919 --> 00:23:26,230
也抵消

600
00:23:26,240 --> 00:23:29,350
我们将进行 0.25 回合

601
00:23:29,360 --> 00:23:31,590
并保存所以是的我们只有一点点

602
00:23:31,600 --> 00:23:33,270
现在让我们创建一些空间

603
00:23:33,280 --> 00:23:35,990
与其他内容分离等等

604
00:23:36,000 --> 00:23:37,669
我会把它留在顶部，但我会

605
00:23:37,679 --> 00:23:39,430
留出余量

606
00:23:39,440 --> 00:23:40,789
三缘

607
00:23:40,799 --> 00:23:44,070
然后保存，现在它自己被推开了

608
00:23:44,080 --> 00:23:45,750
但我们没有涵盖的内容

609
00:23:45,760 --> 00:23:47,830
边距 如果您设置边距

610
00:23:47,840 --> 00:23:49,590
不适用于顶部和底部，但如果

611
00:23:49,600 --> 00:23:51,190
你把它设置为

612
00:23:51,200 --> 00:23:53,350
向左和向右注意我们有三个

613
00:23:53,360 --> 00:23:55,590
现在我们可以使用顶部和底部的内存

614
00:23:55,600 --> 00:23:58,870
关键字 auto 表示左和右

615
00:23:58,880 --> 00:24:01,830
这会将其水平居中

616
00:24:01,840 --> 00:24:04,230
这意味着在中间左右

617
00:24:04,240 --> 00:24:07,190
所以现在我们把一个圆圈放在我们的

618
00:24:07,200 --> 00:24:09,350
里面的金色方块

619
00:24:09,360 --> 00:24:11,830
我们的主要元素，它位于

620
00:24:11,840 --> 00:24:14,230
水平居中而不是垂直居中

621
00:24:14,240 --> 00:24:16,390
至少是水平的，现在

622
00:24:16,400 --> 00:24:18,710
计算我们的圆，我们基本上只是

623
00:24:18,720 --> 00:24:21,669
需要设置另一项边框属性

624
00:24:21,679 --> 00:24:24,870
我们将其设置为一半的值

625
00:24:24,880 --> 00:24:27,430
宽度和高度所以这个边框

626
00:24:27,440 --> 00:24:29,269
属性称为边界半径我会

627
00:24:29,279 --> 00:24:32,789
把它放在边框的正下方

628
00:24:32,799 --> 00:24:35,110
我们会先设置它，以便您可以

629
00:24:35,120 --> 00:24:36,789
看看它是如何工作的，让我们将其设置为 20

630
00:24:36,799 --> 00:24:39,029
像素，你会看到边框半径是多少

631
00:24:39,039 --> 00:24:42,230
看起来确实是圆角的

632
00:24:42,240 --> 00:24:45,190
我们的广场所以现在我们更像是

633
00:24:45,200 --> 00:24:47,029
很酷的按钮有点像你会看到的

634
00:24:47,039 --> 00:24:49,029
在那里，我们可以继续解决这个问题

635
00:24:49,039 --> 00:24:53,029
但如果我们将其设置为 50 像素

636
00:24:53,039 --> 00:24:55,909
宽度的一半和高度的一半

637
00:24:55,919 --> 00:24:57,350
并保存

638
00:24:57,360 --> 00:24:59,190
我们现在有一个圆圈了

639
00:24:59,200 --> 00:25:01,029
做事的方式总是不止一种

640
00:25:01,039 --> 00:25:03,269
css，通常在编程中

641
00:25:03,279 --> 00:25:05,110
一般所以如果你有其他方法

642
00:25:05,120 --> 00:25:07,909
喜欢在 css 中画圆圈，然后

643
00:25:07,919 --> 00:25:09,909
将这些留在下面的评论中，但我

644
00:25:09,919 --> 00:25:11,750
希望这能帮助您了解

645
00:25:11,760 --> 00:25:14,070
今天的盒子模型所以我们有内容

646
00:25:14,080 --> 00:25:16,870
在里面然后我们有填充物

647
00:25:16,880 --> 00:25:18,870
然后我们就有了边界，最后

648
00:25:18,880 --> 00:25:21,350
外面我们有余量，当

649
00:25:21,360 --> 00:25:24,710
我们应用基本的 CSS 重置并设置

650
00:25:24,720 --> 00:25:27,909
盒子壁板到边框盒子 盒子

651
00:25:27,919 --> 00:25:30,070
调整边框大小

652
00:25:30,080 --> 00:25:32,310
那么计算包括

653
00:25:32,320 --> 00:25:35,269
内容填充和边框

654
00:25:35,279 --> 00:25:37,590
而不仅仅是内容，请记住

655
00:25:37,600 --> 00:25:39,350
继续努力进步

656
00:25:39,360 --> 00:25:41,669
每一点点的完美和一点点的进步

657
00:25:41,679 --> 00:25:44,149
这一天将会有很长的路要走

658
00:25:44,159 --> 00:25:45,750
如果是的话请给这个视频点个赞

659
00:25:45,760 --> 00:25:47,909
对您有帮助，感谢您的观看

660
00:25:47,919 --> 00:25:49,590
订阅你就是在帮助我

661
00:25:49,600 --> 00:25:50,789
渠道成长

662
00:25:50,799 --> 00:25:52,870
祝你有美好的一天，让我们写更多

663
00:25:52,880 --> 00:25:56,919
很快就会一起编码